<template>
  <el-container style="height: 100%">
    <el-header
      class="box1"
      v-if="!isFullScreen"
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div class="header">
        <i
          :class="
            $store.state.system.isCollapse
              ? 'el-icon-s-fold'
              : 'el-icon-s-unfold'
          "
          @click="$store.commit('SET_ISCOLLAPSE')"
        ></i>
        <span>{{ SystemNames }}</span>
      </div>
      <div style="width: 190px">
        <Time style="color: white"></Time>
      </div>
    </el-header>
    <el-container>
      <el-aside
        :style="{ width: isCollapse ? '65px' : '256px', height: '100%' }"
        v-show="!isFullScreen"
      >
        <Menu />
      </el-aside>
      <el-main
        class="bix"
        :style="{
          'margin-top': isFullScreen ? 0 : '60px',
          padding: isFullScreen ? 0 : '0px',
        }"
      >
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Menu from "@/components/Aside";
import Time from "../components/time.vue";
import {  WbeTitleList} from "../https/api/user";
export default {
  components: { Menu, Time },
  data() {
    return {
      SystemNames: "",
    };
  },
  mounted() {
    this.QueryWedTitleList();
  },

  methods: {
    QueryWedTitleList() {
      WbeTitleList().then((res) => {
        console.log("获取标题", res);
        if (res) {
          this.SystemNames = res[0].SystemNames;
        
        }
      });
    },
  },
  computed: {
    isCollapse() {
      return this.$store.state.system.isCollapse;
    },
    isFullScreen() {
      return this.$store.state.system.isFullScreen;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box1 {
  background-color: #07203b;
  position: fixed;
  width: 100%;
  z-index: 1;
}
.header {
  margin-left: 30px;
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  color: white;

  span {
    font-size: 22px;
    margin-left: 65px;
    // color:#FFFFFF;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-icon-rank {
  font-size: 27px;
  color: lawngreen;
}
</style>